<!doctype html>
[#escape x as (x)!?html]
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>${channel.title} - ${site.title}</title>
  <meta name="keywords" content="${channel.seoKeywords}">
  <meta name="description" content="${channel.seoDescription}">
  <meta name="_csrf" content="${_csrf.token}"/>
  <meta name="_csrf_header" content="${_csrf.headerName}"/>
  [#include 'inc_meta.html'/]
  [#include 'inc_css.html'/]
  [#include 'inc_js.html'/]
  [#if config.greyStyle]
    <style>
      body {
        filter: grayscale(.95);
        -webkit-filter: grayscale(.95);
      }
    </style>
  [/#if]
</head>
<body>
[#include 'inc_header.html'/]

<div class="container mt-3">
  <div class="row">
    <div class="col-lg-12">
      <!-- 借阅概览 -->
      <div class="card mb-4">
        <div class="card-header">
          <h5><i class="fas fa-book-reader"></i> 借阅概览</h5>
        </div>
        <div class="card-body">
          <div class="row text-center">
            <div class="col-6 col-md-3 mb-3">
              <div class="card h-100 border-0 bg-primary text-white">
                <div class="card-body">
                  <h4>3/10</h4>
                  <small>当前/最大</small>
                </div>
              </div>
            </div>
            <div class="col-6 col-md-3 mb-3">
              <div class="card">
                <div class="card-body">
                  <h4 class="text-warning">1</h4>
                  <small>即将到期图书</small>
                </div>
              </div>
            </div>
            <div class="col-6 col-md-3 mb-3">
              <div class="card">
                <div class="card-body">
                  <h4 class="text-danger">0</h4>
                  <small>逾期图书</small>
                </div>
              </div>
            </div>
            <div class="col-6 col-md-3 mb-3">
              <div class="card">
                <div class="card-body">
                  <h4 class="text-info">5</h4>
                  <small>本月借阅册数</small>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 当前借阅列表 -->
      <div class="card mb-4">
        <div class="card-header d-flex justify-content-between align-items-center">
          <h5 class="mb-0"><i class="fas fa-book"></i> 当前借阅</h5>
          <div class="btn-group btn-group-sm">
            <button type="button" class="btn btn-primary" onclick="renewAll()">
              <i class="fas fa-redo"></i> 批量续借
            </button>
            <button type="button" class="btn btn-secondary" onclick="exportBorrowList()">
              <i class="fas fa-download"></i> 导出列表
            </button>
          </div>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-hover">
              <thead>
                <tr>
                  <th>封面</th>
                  <th>图书信息</th>
                  <th>索书号</th>
                  <th>借阅日期</th>
                  <th>应还日期</th>
                  <th>状态</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody id="borrowList">
                <!-- 动态生成的借阅列表 -->
              </tbody>
            </table>
          </div>
          <!-- 分页 -->
          <nav aria-label="借阅列表分页">
            <ul class="pagination justify-content-center" id="borrowPagination">
              <!-- 动态生成的分页 -->
            </ul>
          </nav>
        </div>
      </div>

      <!-- 预约管理 -->
      <div class="card mb-4">
        <div class="card-header">
          <h5 class="mb-0"><i class="fas fa-bookmark"></i> 预约管理</h5>
        </div>
        <div class="card-body">
          <div class="table-responsive">
            <table class="table table-hover">
              <thead>
                <tr>
                  <th>图书信息</th>
                  <th>预约时间</th>
                  <th>取书地点</th>
                  <th>队列位置</th>
                  <th>状态</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody id="reservationList">
                <!-- 动态生成的预约列表 -->
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- 委托借阅 -->
      <div class="card mb-4">
        <div class="card-header">
          <h5 class="mb-0"><i class="fas fa-exchange-alt"></i> 委托借阅</h5>
        </div>
        <div class="card-body">
          <div class="text-center mb-4">
            <button type="button" class="btn btn-primary" onclick="showCommissionModal()">
              <i class="fas fa-plus"></i> 申请委托借阅
            </button>
          </div>
          <div class="table-responsive">
            <table class="table table-hover">
              <thead>
                <tr>
                  <th>图书信息</th>
                  <th>来源地点</th>
                  <th>目标地点</th>
                  <th>申请时间</th>
                  <th>状态</th>
                  <th>费用</th>
                  <th>操作</th>
                </tr>
              </thead>
              <tbody id="commissionList">
                <!-- 动态生成的委托列表 -->
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- 借阅趋势 -->
      <div class="card mb-4">
        <div class="card-header">
          <h5 class="mb-0"><i class="fas fa-chart-line"></i> 借阅趋势</h5>
        </div>
        <div class="card-body">
          <canvas id="borrowTrendChart" height="200"></canvas>
          <div class="mt-3 text-center">
            <small class="text-muted">近6个月借阅趋势</small>
          </div>
        </div>
      </div>

      <!-- 热门分类 -->
      <div class="card mb-4">
        <div class="card-header">
          <h5 class="mb-0"><i class="fas fa-fire"></i> 热门分类</h5>
        </div>
        <div class="card-body">
          <div class="list-group list-group-flush">
            <a href="#" class="list-group-item list-group-item-action border-0 px-0">
              <div class="d-flex justify-content-between align-items-center">
                <span class="font-weight-500">计算机科学</span>
                <span class="badge badge-primary">45</span>
              </div>
            </a>
            <a href="#" class="list-group-item list-group-item-action border-0 px-0">
              <div class="d-flex justify-content-between align-items-center">
                <span class="font-weight-500">文学</span>
                <span class="badge badge-secondary">32</span>
              </div>
            </a>
            <a href="#" class="list-group-item list-group-item-action border-0 px-0">
              <div class="d-flex justify-content-between align-items-center">
                <span class="font-weight-500">经济学</span>
                <span class="badge badge-info">28</span>
              </div>
            </a>
            <a href="#" class="list-group-item list-group-item-action border-0 px-0">
              <div class="d-flex justify-content-between align-items-center">
                <span class="font-weight-500">历史</span>
                <span class="badge badge-success">21</span>
              </div>
            </a>
          </div>
        </div>
      </div>

      <!-- 借阅历史 -->
      <div class="card mb-4">
        <div class="card-header">
          <h5 class="mb-0"><i class="fas fa-history"></i> 借阅历史</h5>
        </div>
        <div class="card-body">
          <div class="form">
            <div class="form-group">
              <label for="historyFilter">筛选条件</label>
              <div class="row">
                <div class="col-md-6">
                  <select class="form-control" id="historyFilter">
                    <option value="">全部类型</option>
                    <option value="computer">计算机</option>
                    <option value="literature">文学</option>
                    <option value="economics">经济学</option>
                  </select>
                </div>
                <div class="col-md-6">
                  <button type="button" class="btn btn-primary btn-block" onclick="showFullHistory()">
                    <i class="fas fa-history"></i> 查看完整历史
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="list-group list-group-flush">
            <div class="list-group-item border-0 px-0">
              <div class="d-flex justify-content-between align-items-center">
                <div>
                  <h6 class="mb-1">计算机网络</h6>
                  <small class="text-muted">2024-03-01 至 2024-04-01</small>
                </div>
                <span class="badge badge-success">已归还</span>
              </div>
            </div>
            <div class="list-group-item border-0 px-0">
              <div class="d-flex justify-content-between align-items-center">
                <div>
                  <h6 class="mb-1">数据结构</h6>
                  <small class="text-muted">2024-02-15 至 2024-03-15</small>
                </div>
                <span class="badge badge-success">已归还</span>
              </div>
            </div>
            <div class="list-group-item border-0 px-0">
              <div class="d-flex justify-content-between align-items-center">
                <div>
                  <h6 class="mb-1">操作系统</h6>
                  <small class="text-muted">2024-01-20 至 2024-02-20</small>
                </div>
                <span class="badge badge-success">已归还</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 快速操作 -->
      <div class="card mb-4">
        <div class="card-header">
          <h5 class="mb-0"><i class="fas fa-bolt"></i> 快速操作</h5>
        </div>
        <div class="card-body">
          <div class="d-grid gap-2">
            <button type="button" class="btn btn-primary" onclick="showSearchBook()">
              <i class="fas fa-search"></i> 查找图书
            </button>
            <button type="button" class="btn btn-success" onclick="showRecommendBooks()">
              <i class="fas fa-star"></i> 推荐图书
            </button>
            <button type="button" class="btn btn-info" onclick="showBookDatabase()">
              <i class="fas fa-database"></i> 图书数据库
            </button>
            <button type="button" class="btn btn-warning" onclick="showHelpCenter()">
              <i class="fas fa-question-circle"></i> 帮助中心
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- 委托借阅申请模态框 -->
<div class="modal fade" id="commissionModal" tabindex="-1" role="dialog">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">
          <i class="fas fa-exchange-alt mr-2"></i>申请委托借阅
        </h5>
        <button type="button" class="close" data-dismiss="modal">
          <span>&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form id="commissionForm">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label for="bookTitle">图书书名 <span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="bookTitle" required>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="bookAuthor">作者 <span class="text-danger">*</span></label>
                <input type="text" class="form-control" id="bookAuthor" required>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="isbn">ISBN号</label>
                <input type="text" class="form-control" id="isbn">
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="fromLocation">来源校区 <span class="text-danger">*</span></label>
                <select class="form-control" id="fromLocation" required>
                  <option value="">请选择来源校区</option>
                  <option value="main">主校区图书馆</option>
                  <option value="east">东校区图书馆</option>
                  <option value="west">西校区图书馆</option>
                </select>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="toLocation">目标校区 <span class="text-danger">*</span></label>
                <select class="form-control" id="toLocation" required>
                  <option value="">请选择目标校区</option>
                  <option value="main">主校区图书馆</option>
                  <option value="east">东校区图书馆</option>
                  <option value="west">西校区图书馆</option>
                </select>
              </div>
            </div>
            <div class="col-12">
              <div class="form-group">
                <label for="reason">委托理由 <span class="text-danger">*</span></label>
                <textarea class="form-control" id="reason" rows="3" placeholder="请说明委托借阅的具体理由" required></textarea>
              </div>
            </div>
            <div class="col-md-6">
              <div class="form-group">
                <label for="expectedDate">期望到馆时间</label>
                <input type="date" class="form-control" id="expectedDate">
              </div>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" onclick="submitCommission()">
          <i class="fas fa-paper-plane"></i> 提交申请
        </button>
      </div>
    </div>
  </div>
</div>

[#include 'inc_footer.html'/]
<script>
// 模拟的静态数据
const borrowData = {
  current: [
    {
      id: 1001,
      title: "人工智能基础",
      author: "张三",
      publisher: "清华大学出版社",
      callNumber: "TP18/123",
      borrowDate: "2024-04-15",
      dueDate: "2024-05-15",
      daysLeft: 15,
      status: "NORMAL",
      canRenew: true,
      renewCount: 0,
      maxRenewCount: 2,
      coverUrl: "/covers/ai-book.jpg"
    },
    {
      id: 1002,
      title: "数据结构与算法",
      author: "李四",
      publisher: "人民邮电出版社",
      callNumber: "TP311/456",
      borrowDate: "2024-04-01",
      dueDate: "2024-05-01",
      daysLeft: 1,
      status: "DUE_SOON",
      canRenew: true,
      renewCount: 1,
      maxRenewCount: 2,
      coverUrl: "/covers/datastructure-book.jpg"
    }
  ],
  reservations: [
    {
      id: 2001,
      title: "深度学习",
      author: "Ian Goodfellow",
      reserveDate: "2024-04-10",
      pickupLocation: "主馆三楼",
      queuePosition: 3,
      status: "WAITING"
    }
  ],
  commissions: [
    {
      id: 3001,
      title: "机器学习实战",
      fromLocation: "东校区图书馆",
      toLocation: "西校区图书馆",
      applyDate: "2024-04-12",
      status: "TRANSIT",
      fee: 5.00
    }
  ],
  history: [
    {
      title: "计算机网络",
      author: "谢希仁",
      borrowDate: "2024-03-01",
      returnDate: "2024-04-01",
      borrowDays: 31,
      status: "RETURNED"
    },
    {
      title: "操作系统概念",
      author: "Abraham Silberschatz",
      borrowDate: "2024-02-15",
      returnDate: "2024-03-15",
      borrowDays: 28,
      status: "RETURNED"
    }
  ]
};

// 获取状态样式
function getStatusBadgeClass(status) {
  const statusMap = {
    'NORMAL': 'success',
    'DUE_SOON': 'warning',
    'OVERDUE': 'danger',
    'WAITING': 'info',
    'AVAILABLE': 'success',
    'TRANSIT': 'warning'
  };
  return statusMap[status] || 'secondary';
}

function getStatusText(status) {
  const statusMap = {
    'NORMAL': '正常',
    'DUE_SOON': '即将到期',
    'OVERDUE': '已逾期',
    'WAITING': '等待中',
    'AVAILABLE': '可取',
    'TRANSIT': '调配中',
    'RETURNED': '已归还'
  };
  return statusMap[status] || status;
}

// 渲染借阅列表
function renderBorrowList() {
  const tbody = document.getElementById('borrowList');
  tbody.innerHTML = '';

  borrowData.current.forEach(book => {
    const row = document.createElement('tr');
    var dueDateHtml = '';
    if (book.daysLeft <= 3) {
      dueDateHtml = '<small class="text-warning font-weight-bold">' + book.dueDate + '</small><br><small class="text-warning">剩余' + book.daysLeft + '天</small>';
    } else {
      dueDateHtml = '<small>' + book.dueDate + '</small>';
    }

    var renewButton = '';
    if (book.canRenew) {
      renewButton = '<button type="button" class="btn btn-outline-primary" onclick="renewBook(' + book.id + ')">续借</button>';
    }

    row.innerHTML =
      '<td>' +
        '<img src="' + book.coverUrl + '" alt="' + book.title + '" class="img-thumbnail" style="width: 60px; height: 80px; object-fit: cover;">' +
      '</td>' +
      '<td>' +
        '<div>' +
          '<strong>' + book.title + '</strong><br>' +
          '<small class="text-muted">' + book.author + ' | ' + book.publisher + '</small>' +
        '</div>' +
      '</td>' +
      '<td><small>' + book.callNumber + '</small></td>' +
      '<td><small>' + book.borrowDate + '</small></td>' +
      '<td>' + dueDateHtml + '</td>' +
      '<td>' +
        '<span class="badge badge-' + getStatusBadgeClass(book.status) + '">' + getStatusText(book.status) + '</span>' +
      '</td>' +
      '<td>' +
        '<div class="btn-group btn-group-sm">' +
          renewButton +
          '<button type="button" class="btn btn-outline-info" onclick="viewBookDetail(' + book.id + ')">详情</button>' +
        '</div>' +
      '</td>';
    tbody.appendChild(row);
  });
}

// 渲染预约列表
function renderReservationList() {
  const tbody = document.getElementById('reservationList');
  tbody.innerHTML = '';

  borrowData.reservations.forEach(reservation => {
    const row = document.createElement('tr');
    row.innerHTML =
      '<td>' +
        '<div>' +
          '<strong>' + reservation.title + '</strong><br>' +
          '<small class="text-muted">' + reservation.author + '</small>' +
        '</div>' +
      '</td>' +
      '<td><small>' + reservation.reserveDate + '</small></td>' +
      '<td><small>' + reservation.pickupLocation + '</small></td>' +
      '<td><span class="badge badge-primary">第' + reservation.queuePosition + '位</span></td>' +
      '<td>' +
        '<span class="badge badge-' + getStatusBadgeClass(reservation.status) + '">' + getStatusText(reservation.status) + '</span>' +
      '</td>' +
      '<td>' +
        '<div class="btn-group btn-group-sm">' +
          '<button type="button" class="btn btn-outline-warning" onclick="cancelReservation(' + reservation.id + ')">取消</button>' +
          '<button type="button" class="btn btn-outline-info" onclick="viewReservationDetail(' + reservation.id + ')">详情</button>' +
        '</div>' +
      '</td>';
    tbody.appendChild(row);
  });
}

// 渲染委托列表
function renderCommissionList() {
  const tbody = document.getElementById('commissionList');
  tbody.innerHTML = '';

  borrowData.commissions.forEach(commission => {
    const row = document.createElement('tr');
    row.innerHTML =
      '<td>' +
        '<div>' +
          '<strong>' + commission.title + '</strong>' +
        '</div>' +
      '</td>' +
      '<td><small>' + commission.fromLocation + '</small></td>' +
      '<td><small>' + commission.toLocation + '</small></td>' +
      '<td><small>' + commission.applyDate + '</small></td>' +
      '<td>' +
        '<span class="badge badge-' + getStatusBadgeClass(commission.status) + '">' + getStatusText(commission.status) + '</span>' +
      '</td>' +
      '<td><span class="text-danger">¥' + commission.fee + '</span></td>' +
      '<td>' +
        '<div class="btn-group btn-group-sm">' +
          '<button type="button" class="btn btn-outline-warning" onclick="cancelCommission(' + commission.id + ')">取消</button>' +
          '<button type="button" class="btn btn-outline-info" onclick="viewCommissionDetail(' + commission.id + ')">详情</button>' +
        '</div>' +
      '</td>';
    tbody.appendChild(row);
  });
}

// 绘制借阅趋势图
function drawBorrowTrendChart() {
  const ctx = document.getElementById('borrowTrendChart');
  if (!ctx) return;

  new Chart(ctx, {
    type: 'line',
    data: {
      labels: ['11月', '12月', '1月', '2月', '3月', '4月'],
      datasets: [{
        label: '借阅册数',
        data: [12, 19, 8, 15, 25, 18],
        borderColor: '#007bff',
        backgroundColor: 'rgba(0, 123, 255, 0.1)',
        tension: 0.4
      }]
    },
    options: {
      responsive: true,
      maintainAspectRatio: false,
      aspectRatio: 2,
      plugins: {
        legend: {
          display: false
        }
      },
      scales: {
        y: {
          beginAtZero: true
        }
      }
    }
  });
}

// 功能函数
function renewBook(bookId) {
  alert('续借图书ID: ' + bookId);
}

function renewAll() {
  alert('批量续借功能：选择多本图书进行批量续借');
}

function cancelReservation(reservationId) {
  alert('取消预约ID: ' + reservationId);
}

function cancelCommission(commissionId) {
  alert('取消委托ID: ' + commissionId);
}

function viewBookDetail(bookId) {
  alert('查看图书详情ID: ' + bookId);
}

function viewReservationDetail(reservationId) {
  alert('查看预约详情ID: ' + reservationId);
}

function viewCommissionDetail(commissionId) {
  alert('查看委托详情ID: ' + commissionId);
}

function showCommissionModal() {
  $('#commissionModal').modal('show');
}

function submitCommission() {
  const form = document.getElementById('commissionForm');
  if (form.checkValidity()) {
    alert('委托借阅申请提交成功！');
    $('#commissionModal').modal('hide');
    form.reset();
  } else {
    alert('请填写完整的申请信息！');
  }
}

function exportBorrowList() {
  alert('导出当前借阅列表为Excel文件');
}

function showFullHistory() {
  alert('显示完整的借阅历史记录页面');
}

function showSearchBook() {
  alert('跳转到图书检索页面');
}

function showRecommendBooks() {
  alert('跳转到个性化推荐页面');
}

function showBookDatabase() {
  alert('跳转到图书数据库页面');
}

function showHelpCenter() {
  alert('跳转到帮助中心页面');
}

// 页面初始化
document.addEventListener('DOMContentLoaded', function() {
  renderBorrowList();
  renderReservationList();
  renderCommissionList();
  drawBorrowTrendChart();
});

// API调用统计
axios.get('${api}/channel/view/${channel.id?c}');
</script>
</body>
</html>
[/#escape]
